<template>
  <div class="rednest">
    <el-row :gutter="1">
      <el-col :span="18">
        <ul class="topicContentUl" style="margin: 0px;padding: 0px">
          <li v-for="(topicItem,index) in topicContent" :key="index">
            <div class="grid-content bg-purple">
              <h2>{{topicItem.title}}</h2>
              <p>{{topicItem.content}}</p>
              <p class="authors">
                <img :src='topicItem.url'>
                <span class="author">{{topicItem.author}}</span>
                <span>{{topicItem.time}}</span>
                <router-link to="/topic" class="discuss">讨论</router-link>
              </p>
            </div>
          </li>
        </ul>
        <div style="clear:both;"></div>
     </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple">
          <div class="newsSidebar">
            <p>今日推荐</p>
            <ul class="newsSidebarUl">
              <li v-for="topicItem in topicSecommend" :key="topicItem.url">
                <span>{{topicItem.url}}</span>
              </li>
            </ul>
          </div>
          <div style="clear:both;"></div>
        </div>
        <div class="grid-content bg-purple">
          <div class="newsSidebar">
            <p>话题大牛</p>
            <ul class="newsSidebarUl">
              <li v-for="topicItem in topicSuperhuman" :key="topicItem.url">
                <span>{{topicItem.url}}</span>
              </li>
            </ul>
          </div>
          <div style="clear:both;"></div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
    export default {
      name: "topic",
      data(){
          return{
            topicContent:[
              {
                title:'title',
                content:'content',
                url:'url',
                author:'author',
                time:'time',
              },{
                title:'title',
                content:'content',
                url:'url',
                author:'author',
                time:'time',
              }
            ],
            topicSecommend:[
              {url:'推荐1'},
              {url:'推荐2'}
            ],
            topicSuperhuman:[
              {url:'大牛一'},
              {url:'大牛二'}
            ]
          }
      },
    }
</script>

<style scoped>
  .grid-content{
    text-align: left;
    padding:0px 4%;
  }
  .discuss{
    float: right;
    color: black;
    text-decoration: none;
  }
  .authors p,span{
    padding: 0px 1%;
  }
  .author{
    border-right: 1px solid #a09b9a;

  }
</style>
